<template>
  <div>
    <div class="tab-container">
      <div class="tab-header">
        <button v-for="(item,index) in tabsArr" :key="index" :id="item.id" @click="switchTab(item.id)">
          <i :class="item.icon" class="icon-style"></i>
          {{item.name}}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "yanyun-tab",
  props: {
    tabsArr:{
      type: Array,
      default: () => {
        return [];
      }
    },
    // 是否需要默认选中
    isDefault:{
      type: Boolean,
      default: false
    },
    // 默认的选中页面
    defaultTab:{
      type: Object,
      default: () => {
        return {};
      }
    },
  },
  components: {},
  created() {
    this.initData();
  },
  mounted() {

  },
  data() {
    return {
    }
  },
  methods: {
    initData(){
      if(this.defaultTab && this.isDefault){
        this.$nextTick(()=>{
          document.getElementById(this.defaultTab.id).classList.add('active');
          this.$emit('switchTab', this.defaultTab.id);
        })
      }
    },
    switchTab(tabId) {
      let tabButtons = document.querySelectorAll('.tab-header button');
      tabButtons.forEach(button => button.classList.remove('active'));
      document.getElementById(tabId).classList.add('active');
      this.$emit('switchTab', tabId);
    },
  },
  computed: {},
  watch: {},
}
</script>

<style scoped>
/* 整体tab容器样式 */
.tab-container {
  width: 300px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  height: 100%;
}

/* tab头部按钮容器样式 */
.tab-header {
  display: flex;
  background-color: #f5f7fa;
  height: 100%;
}

/* tab按钮样式 */
.tab-header button {
  background-color: white;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  flex: 1;
  color: #606266;
  position: relative;
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* 选中的tab按钮样式 */
.tab-header button.active {
  color: #409EFF;
  background-color: transparent;
  border-bottom: #409EFF 2px solid;
}

/* 按钮关闭图标样式 */
.tab-header button.close-icon {
  display: none;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #ccc;
  font-size: 14px;
  transition: color 0.3s ease;
}

.icon-style{
  font-size: 15px;
}
</style>
